.config-panel-wp {
  position: relative;
  z-index: 90;
  overflow: hidden;
  width: var(--schema-options-width);
  height: 100%;
  background: var(--schema-color-bg-dark);
  box-shadow: -1px 0 #000;
  transition: width .25s ease-in-out;
  .config-panel {
    width: var(--schema-options-width);
    height: 100%;
    background: var(--schema-color-bg-dark);
    transition: .25s ease-in-out;
    user-select: none;
  }
  &.is-hide {
    width: 0;
    .config-panel {
      transform: translateX(100%);
    }
  }
}

// 页面配置面板
.page-config-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .page-config-top {
    width: 100%;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    background: var(--schema-color-bg-light);
    user-select: none;
  }
  .page-config-content {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 30px);
  }
  .tabs-wrapper {
    display: flex;
    .tab-item {
      flex: 1;
      cursor: pointer;
      border-top: 2px solid transparent;
      color: #bcc9d4;
      height: 30px;
      line-height: 30px;
      background: var(--schema-color-bg-deep);
      > i {
        position: relative;
        top: -1px;
      }
      &.active {
        color: var(--bin-color-primary);
        border-top-color: var(--bin-color-primary);
        background: var(--schema-color-bg-dark);
      }
    }
  }
}
// 参数设置样式
.setting-panel {
  width: 100%;
  height: 100%;
  .setting-panel-content {
    width: 100%;
    height: calc(100% - 60px - 32px);
    .scroll-container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .bin-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  }
  .basic-setting-wp {
    border-bottom: 1px solid var(--schema-color-border);
  }
  .setting-panel-gui {
    .series-title {
      position: relative;
      padding: 16px 16px 8px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:before {
        content: '';
        position: absolute;
        top: 20px;
        left: 16px;
        width: 6px;
        height: 6px;
        background: var(--bin-color-primary);
      }
    }
  }
}
// 数据中心面板样式
.data-center-panel {
  height: 100%;
  .scroll-container {
    height: calc(100% - 60px - 32px);
  }

  .api-editor {
    .api-editor-title {
      display: flex;
      width: 100%;
      height: 38px;
      padding-right: 34px;
      padding-left: 10px;
      font-size: var(--schema-font-size);
      background: #1c1f25;
      border-top: 1px solid var(--schema-color-border);
      border-bottom: 1px solid var(--schema-color-border);
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;
      transition: 0.4s;
    }
    .api-desc {
      max-width: 160px;
      color: #fff;
      white-space: initial;
      cursor: pointer;
    }
    &.--disable-fold {
      .api-desc {
        cursor: default;
      }
    }
    &.--fold {
      .api-fold-icon {
        transform: rotate(90deg);
      }
    }
  }

  .data-attr-table {
    width: 100%;
    color: var(--schema-font-color);
    text-align: left;
    .table-head {
      display: block;
      width: 100%;
      height: 40px;
      font-size: 0;
      line-height: 40px;
      border-bottom: 1px solid var(--schema-color-border);

      .table-head-row {
        display: block;
        width: 100%;
        height: 100%;
      }

      .th-item {
        font-weight: 400;
      }
    }

    .table-body {
      display: block;
      width: 100%;
      padding-bottom: 10px;

      .table-body-row {
        display: block;
        width: 100%;
      }
    }
    .table-head, .table-body {
      .column-item {
        display: inline-flex;
        height: 40px;
        padding: 0 6px;
        font-size: 12px;
        line-height: 17px;
        vertical-align: middle;
        box-sizing: border-box;
        align-items: center;
        &:first-child {
          padding-left: 10px;
        }
      }
      .attr-name {
        width: 19%;
        text-align: center;
        .ellipsis2 {
          padding-left: 8px;
        }
      }

      .attr-value {
        width: 41%;
      }

      .attr-status {
        width: 40%;
      }
      .attr-input {
        width: 108px;
        height: 24px;
      }
    }
  }


  .data-source {
    color: var(--schema-font-color);
    .data-result-title {
      padding: 10px;
      border-top: 1px solid var(--schema-color-border);
      border-bottom: 1px solid var(--schema-color-border);
    }
  }
}
